<style type="text/css">
    .crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}
    #cropzoom_container{float:left; width:500px}
    #preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}
    .page_btn{float:right; width:150px;  margin-top:20px; line-height:30px; text-align:center}
    .clear{clear:both}
    .btn{cursor:pointer}
    #news{ line-height:35px; height:35px;background-color:#F60;border: 1px solid #000000; color:#FFF; text-align:center}
    #news a{ color:#FFF; font-family:"微软雅黑"; font-size:14px; text-decoration:none}
</style>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
<script type="text/javascript">
$(function() {
    <?php echo "var w=" .$width.";";?>
    <?php echo "var h=" .$height.";";?>
    <?php echo "var id=" .$model->ID.";";?>
 
     var cropzoom = $('#cropzoom_container').cropzoom({
          width: 500,
          height: h+100,
          bgColor: '#ccc',
          enableRotation: true,
          enableZoom: true,
          selector: {
			   w:150,
			   h:200,
			   showPositionsOnDrag:true,
			   showDimetionsOnDrag:false,
               centered: true,
			   bgInfoLayer:'#fff',
               borderColor: 'blue',
			   animated: false,
			   maxWidth:150,
			   maxHeight:200,
               borderColorHover: 'yellow'
           },
           image: {
               source: "<?php echo $model->Path?>",
               width: w,
               height: h,
               minZoom: 30,
               maxZoom: 150
            }
      });
	 $("#crop").click(function(){

		  cropzoom.send('?r=poster/cropzoom', 'POST', {}, function(imgRet) {
               $("#generated").attr("src", imgRet);
                $('#sure_btn').attr('disabled',false);
                $('#sure_btn').addClass('btn');
          });			   
	 });
	 $("#restore").click(function(){
		  $("#generated").attr("src", "images/head.gif");
		  cropzoom.restore();	
          $('#sure_btn').attr('disabled',true);
          $('#sure_btn').removeClass('btn');
	 });
     $('#sure_btn').on('click',function(){
           $.ajax({
                type:'POST',
                data:{id:id},
                url:'?r=poster/surecorp'
            })
     })
});
</script>

</head>

<body>

<div id="main">
    <div class="crop">
           <div id="cropzoom_container"></div>
           <div id="preview"><img id="generated" src="images/head.gif"  /></div>
           <div class="page_btn">
              <input type="button" class="btn" id="crop" value="剪切照片" />
              <input type="button" class="btn" id="restore" value="照片复位" />
           </div>
           <div style="text-align:center" >
              <button style="width:150px;height:50px;margin:10px auto;font-size:24px;text-align:center;" id='sure_btn' disabled>确认</button>
           </div>
           <div class="clear"></div>
    </div>

</div>

</body>
</html>
